<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站信息</title>
<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet"></head>
<body>
    <div class="container my-4">
        <h1>网站信息设置</h1>
        <form id="settingsForm">
            <!-- 网站名称 -->
            <div class="mb-3">
                <label for="siteName" class="form-label">网站名称</label>
                <input type="text" class="form-control" id="siteName" placeholder="网站名称">
                <div id="siteNameError" class="text-danger"></div>
            </div>
            <!-- 管理员账号 -->
            <div class="mb-3">
                <label for="adminAccount" class="form-label">管理员账号（请勿修改）</label>
                <input type="email" class="form-control" id="adminAccount" placeholder="管理员账号 (必须为邮箱)">
                <div id="adminAccountError" class="text-danger"></div>
            </div>

            <!-- 管理员密码 -->
            <div class="mb-3">
                <label for="adminPassword" class="form-label">管理员密码</label>
                <input type="password" class="form-control" id="adminPassword" placeholder="管理员密码">
                <div id="adminPasswordError" class="text-danger"></div>
            </div>

            <!-- QQ群 -->
            <div class="mb-3">
                <label for="qqGroup" class="form-label">QQ群链接</label>
                <input type="text" class="form-control" id="qqGroup" placeholder="QQ群">
            </div>

            <!-- 电报群 -->
            <div class="mb-3">
                <label for="telegramGroup" class="form-label">电报群链接</label>
                <input type="text" class="form-control" id="telegramGroup" placeholder="电报群">
            </div>

            <!-- 验证码邮箱 -->
            <div class="mb-3">
                <label for="emailSmtp" class="form-label">邮箱smtp</label>
                <input type="text" class="form-control" id="emailSmtp" placeholder="如：smtp.163.com">
                <div id="emailSmtpError" class="text-danger"></div>
            </div>
            <div class="mb-3">
                <label for="emailCaptcha" class="form-label">验证码邮箱</label>
                <input type="email" class="form-control" id="emailCaptcha" placeholder="邮箱必须使用与smtp对应邮箱">
                <div id="emailCaptchaError" class="text-danger"></div>
            </div>

            <!-- 邮件授权码 -->
            <div class="mb-3">
                <label for="emailAuthCode" class="form-label">邮件授权码</label>
                <input type="text" class="form-control" id="emailAuthCode" placeholder="邮件授权码">
                <div id="emailAuthCodeError" class="text-danger"></div>
            </div>
            <div class="d-inline-flex align-items-center">
                <button type="button" class="btn btn-primary" onclick="submitData()">修改数据</button>
            </div>
        </form>
    </div>

    <script>

        // 页面加载时从接口获取当前信息并填充
        window.onload = function() {
            fetch('/get-settings')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('adminAccount').value = data.adminAccount;
                    document.getElementById('adminPassword').value = data.adminPassword;
                    document.getElementById('siteName').value = data.siteName;
                    document.getElementById('qqGroup').value = data.qqGroup;
                    document.getElementById('telegramGroup').value = data.telegramGroup;
                    document.getElementById('emailSmtp').value = data.emailSmtp;
                    document.getElementById('emailCaptcha').value = data.emailCaptcha;
                    document.getElementById('emailAuthCode').value = data.emailAuthCode;
                });
        }

        function submitData() {
            // 获取表单元素
            const adminAccount = document.getElementById("adminAccount");
            const adminPassword = document.getElementById("adminPassword");
            const siteName = document.getElementById("siteName");
            const emailSmtp = document.getElementById("emailSmtp");
            const emailCaptcha = document.getElementById("emailCaptcha");
            const emailAuthCode = document.getElementById("emailAuthCode");

            // 错误提示元素
            const adminAccountError = document.getElementById("adminAccountError");
            const adminPasswordError = document.getElementById("adminPasswordError");
            const siteNameError = document.getElementById("siteNameError");
            const emailSmtpError = document.getElementById("emailSmtpError");
            const emailCaptchaError = document.getElementById("emailCaptchaError");
            const emailAuthCodeError = document.getElementById("emailAuthCodeError");

            // 重置错误提示和样式
            [adminAccount, adminPassword, siteName, emailSmtp, emailCaptcha, emailAuthCode].forEach(el => {
                el.classList.remove("is-invalid");
            });
            [adminAccountError, adminPasswordError, siteNameError, emailSmtpError, emailCaptchaError, emailAuthCodeError].forEach(el => {
                el.textContent = "";
            });

            let valid = true;

            // 验证字段
            if (!adminAccount.value || !adminAccount.value.includes('@')) {
                adminAccount.classList.add("is-invalid");
                adminAccountError.textContent = "管理员账号必须为邮箱格式";
                valid = false;
            }
            if (!adminPassword.value) {
                adminPassword.classList.add("is-invalid");
                adminPasswordError.textContent = "管理员密码为必填项";
                valid = false;
            }
            if (!siteName.value) {
                siteName.classList.add("is-invalid");
                siteNameError.textContent = "网站名称为必填项";
                valid = false;
            }
            if (!emailSmtp.value) {
                emailSmtp.classList.add("is-invalid");
                emailSmtpError.textContent = "邮件smtp为必填项";
                valid = false;
            }
            if (!emailCaptcha.value || !emailCaptcha.value.includes('@')) {
                emailCaptcha.classList.add("is-invalid");
                emailCaptchaError.textContent = "验证码邮箱必须为邮箱格式";
                valid = false;
            }
            if (!emailAuthCode.value) {
                emailAuthCode.classList.add("is-invalid");
                emailAuthCodeError.textContent = "邮件授权码为必填项";
                valid = false;
            }

            // 如果验证通过，提交其他设置数据
            if (valid) {
                const settingsData = {
                    adminPassword: adminPassword.value,
                    siteName: siteName.value,
                    qqGroup: document.getElementById('qqGroup').value,
                    telegramGroup: document.getElementById('telegramGroup').value,
                    emailSmtp: emailSmtp.value,
                    emailCaptcha: emailCaptcha.value,
                    emailAuthCode: emailAuthCode.value
                };

                fetch('/submit-settings2', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(settingsData)
                })
                .then(response => response.json())
                .then(data => {
                alert(data.message);
            })
            }
        }
    </script>

<script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script></body>
</html>